ARIA: aria-labelledby-Attribut

Die aria-labelledby-Eigenschaft ermöglicht es Autoren, andere Elemente auf der Seite zu referenzieren, um einen zugänglichen Namen zu definieren. Dies ist nützlich, wenn Elemente verwendet werden, die keine native Unterstützung bieten, um Elemente zu verknüpfen und einen zugänglichen Namen bereitzustellen.

Einige Elemente erhalten ihren zugänglichen Namen aus ihrem inneren Inhalt. Beispielsweise stammt der zugängliche Name für ein <button>, <a> oder <td> aus dem Text zwischen den öffnenden und schließenden Tags. Andere Elemente, wie Formular-<textarea>, <fieldset> und <table> erhalten ihren zugänglichen Namen aus dem Inhalt der verknüpften Elemente; für diese Elemente stammt der zugängliche Name vom <label> mit einem for-Attribut, <legend> und <caption>.

Alle interaktiven Elemente müssen einen zugänglichen Namen haben. aria-labelledby kann verwendet werden, um ein anderes Element zu referenzieren, um seinen zugänglichen Namen zu definieren, wenn der zugängliche Name eines Elements Inhalte benötigt, die sich anderswo im DOM befinden.

Wenn es keinen Inhalt gibt, der referenziert werden kann, um einen zugänglichen Namen zu erstellen, sollte stattdessen das aria-label Attribut verwendet werden.

Der Zweck von aria-labelledby ist derselbe wie der von aria-label. Es bietet dem Benutzer einen erkennbaren, zugänglichen Namen für ein interaktives Element. Wenn ein Element beide Attribute gesetzt hat, wird aria-labelledby verwendet. aria-labelledby hat Vorrang vor allen anderen Methoden, um einen zugänglichen Namen bereitzustellen, einschließlich aria-label, <label> und dem inneren Text des Elements.

Die Attribute aria-labelledby und aria-describedby referenzieren beide andere Elemente, um alternative Textdarstellungen zu berechnen. aria-labelledby sollte einen kurzen Text referenzieren, der dem Element einen zugänglichen Namen bietet. aria-describedby wird verwendet, um längere Inhalte zu referenzieren, die eine Beschreibung liefern. Wenn es kein Element im DOM gibt, das ein kurzes Etikett für einen zugänglichen Namen eines interaktiven Elements bietet, verwenden Sie aria-label, um den zugänglichen Namen für ein interaktives Element zu definieren.

Das folgende Beispiel verwendet aria-labelledby, um einem Checkbox-Eingabefeld einen zugänglichen Namen zu geben, indem der Textinhalt eines benachbarten Elements verwendet wird:

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

Beachten Sie, dass die Verwendung von aria-labelledby in dieser Situation ähnlich ist wie die Verwendung eines HTML-<label>-Elements mit dem for-Attribut, es gibt jedoch einige sehr wichtige Unterschiede. Das aria-labelledby-Attribut definiert nur den zugänglichen Namen. Es bietet keine weiteren Funktionen von <label>, wie z. B. das Aktivieren des zugeordneten Eingabefelds durch Klicken auf das kennzeichnende Element. Das muss mit JavaScript hinzugefügt werden.

Glücklicherweise funktioniert das HTML-<input> mit type="checkbox" mit dem nativen <label>. Wenn möglich, verwenden Sie Folgendes:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions.
</label>
<p><a href="tac.html">Read our Terms and Conditions</a>.</p>

1. Die aria-labelledby-Eigenschaft hat die höchste Priorität, wenn Browser zugängliche Namen berechnen. Beachten Sie, dass sie andere Methoden zur Benennung des Elements übersteuert, einschließlich aria-label, anderer Benennungsattribute und sogar des Inhalts des Elements.

   html

   <button aria-label="Blue" aria-labelledby="color">Red</button>
   <span id="color">Yellow</span>
   

   In diesem Beispiel ist der zugängliche Name "Yellow".

2. Die aria-labelledby-Eigenschaft nimmt als Wert eine durch Leerzeichen getrennte ID-Referenzliste an, was bedeutet, dass Sie mehr als ein Element in einen einzigen zugänglichen Namen kombinieren können. Sie können die id des Elements selbst einschließen, um auf dessen eigenen Inhalt zu verweisen.

   html

   <h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
   <p>
     There are over 50 ARIA states and properties, but 13 of them stand out…
     <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
   </p>
   

   In diesem Beispiel lautet der zugängliche Name "read more 13 ARIA attributes you need to know".

3. Der Wert der aria-labelledby-Eigenschaft ist wichtig. Wenn mehr als ein Element mit aria-labelledby referenziert wird, werden die Inhalte jedes referenzierten Elements in der Reihenfolge kombiniert, in der sie im aria-labelledby-Wert referenziert werden. Hätten wir aria-labelledby="attr rm13"> geschrieben, wäre der zugängliche Name "13 ARIA attributes you need to know read more".

4. Die aria-labelledby-Eigenschaft ignoriert in ihrem Wert wiederholte ids. Wenn ein Element mehr als einmal referenziert wird, wird nur der erste Verweis verarbeitet. aria-labelledby="attr attr rm13 rm13"> wird als aria-labelledby="attr rm13"> behandelt.

5. Der Wert der aria-labelledby-Eigenschaft kann Inhalte von Elementen enthalten, die nicht einmal sichtbar sind. Während Sie Benutzern von Unterstützungstechnologien denselben Inhalt wie allen anderen Benutzern bereitstellen sollten, können Sie Inhalte aus Elementen mit dem HTML-Attribut hidden, CSS display: none und CSS visibility: hidden in die berechnete Namenszeichenfolge aufnehmen.

6. Die aria-labelledby-Eigenschaft integriert den Wert von Eingabeelementen. Wenn der Wert ein <input> referenziert, wird der aktuelle Wert des Formularelements in die berechnete Namenszeichenfolge aufgenommen und ändert sich, wenn der Wert aktualisiert wird.

7. Die aria-labelledby-Eigenschaft kann nicht verkettet werden. Wenn ein Element mit aria-labelledby auf ein anderes Element verweist, das ebenfalls aria-labelledby hat, wird das aria-labelledby-Attribut des referenzierten Elements ignoriert.

ID-Referenzliste

Durch Leerzeichen getrennte Liste von einem oder mehreren ID-Werten, die auf die Elemente verweisen, die das aktuelle Element kennzeichnen.

Element.ariaLabelledByElements

Die ariaLabelledByElements-Eigenschaft ist Teil der Schnittstelle jedes Elements. Ihr Wert ist ein Array von Unterklassen von Element, die die id-Referenzen im aria-labelledby-Attribut widerspiegeln (mit einigen Vorbehalten).

ElementInternals.ariaLabelledByElements

Die ariaLabelledByElements-Eigenschaft ist Teil der Schnittstelle jedes benutzerdefinierten Elements. Ihr Wert ist ein Array von Unterklassen von Element, die die id-Referenzen im aria-labelledby-Attribut widerspiegeln (mit einigen Vorbehalten).

In fast allen Rollen verwendet, außer in Rollen, die vom Autor keinen zugänglichen Namen erhalten können.

Das aria-labelledby-Attribut wird NICHT unterstützt in:

• code
• caption
• deletion
• emphasis
• generic
• insertion
• mark
• paragraph
• presentation / none
• strong
• subscript
• superscript
• suggestion
• term
• time

• HTML <label>-Element
• HTML <legend>-Element
• HTML <caption>-Element
• aria-label
• aria-describedby